<template>
  <div class="audio">
    <audio ref="audio"
           :src="recordUrl"
           controls="controls"></audio>
    <div class="box">
      <div class="left boxBorder"
           @click="changeSpeed('remove')">
        <i class="el-icon-minus"></i>
      </div>
      <div class="center">
        <el-select v-model="value"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="right boxBorder"
           @click="changeSpeed('add')">
        <i class="el-icon-plus"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recordUrl: {
      type: String,
      required: true
    },
    refIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      options: [],
      value: 1.0
    }
  },
  created () {
    this.options.push({ label: `正常速率`, value: 1 })
    for (let index = 0; index <= 5; index = index + 0.5) {
      if (index === 1 || index === 0) {
        continue
      } else {
        this.options.push({ label: `${index.toFixed(1)}倍速率`, value: index })
      }
    }
  },
  watch: {
    value (val) {
      this.$refs.audio.playbackRate = val
    }
  },
  methods: {
    changeSpeed (type) {
      if (type === 'add') {
        if (this.value < 5) {
          this.value = this.value + 0.5
        }
      } else {
        if (this.value > 0.5) {
          this.value = this.value - 0.5
        }
      }
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
.box {
  display: flex;
  background: #f1f3f4;
  justify-content: center;
  text-align: center;
}
.center {
  width: 120px;
}
.boxBorder {
  text-align: center;
  height: 32px;
  line-height: 32px;
  width: 32px;
  border: 1px solid #eee;
}
</style>